---
import { Code } from "astro:components";
import Layout from "../layouts/Layout.astro";

const EXAMPLE_CODE = `
fn app() -> Element {
    let mut count = use_signal(|| 0);

    rsx!(
        rect {
            height: "50%",
            width: "100%",
            main_align: "center",
            cross_align: "center",
            background: "rgb(0, 119, 182)",
            color: "white",
            shadow: "0 4 20 5 rgb(0, 0, 0, 80)",
            label {
                font_size: "75",
                font_weight: "bold",
                "{count}"
            }
        }
        rect {
            height: "50%",
            width: "100%",
            main_align: "center",
            cross_align: "center",
            direction: "horizontal",
            Button {
                onclick: move |_| count += 1,
                label { "Increase" }
            }
            Button {
                onclick: move |_| count -= 1,
                label { "Decrease" }
            }
        }
    )
}
`.trim();
---

<Layout title="Freya - GUI Library for Rust">
    <div class="flex flex-col lg:flex-row justify-center items-center pb-8">
        <img class="mx-auto mb-8 sm:m-0" src="/logo.svg" width="150">
        <div class="inline-block sm:p-4">
            <p>Build cross-platform GUI applications using 🦀 <a href="https://www.rust-lang.org/" class="underline">Rust</a>. <br/>Powered by 🎨 <a href="https://skia.org/" rel="noreferrer"class="underline">Skia</a>.</p>
            <br/>
            <a class="sm:inline-block sm:my-0 block text-start sm:text-center px-6 my-2 mr-2 py-2 bg-sky-500 rounded-lg text-black hover:bg-sky-600 transition-colors delay-[10]" href="https://docs.rs/freya/latest/freya/_docs/introduction/index.html">Get Started</a>
            <a class="sm:inline-block sm:my-0 block text-start sm:text-center px-6 my-2 mr-2 py-2 bg-orange-300 rounded-lg text-black hover:bg-orange-400 transition-colors delay-[10]" href="https://github.com/marc2332/freya">Source Code</a>
            <a class="sm:inline-block sm:my-0 block text-start sm:text-center px-6 my-2 mr-2 py-2 bg-pink-300 rounded-lg text-black hover:bg-pink-400 transition-colors delay-[10]" href="https://github.com/sponsors/marc2332">Sponsor</a>
        </div>
    </div>
    <div class="p-6 py-8 lg:w-[60rem] lg:flex gap-10 block  justify-evenly items-center mx-auto text-black border border-stone-800 m-2 rounded-2xl bg-custom-dark-gray">
        <div class="text-xs">
            <Code code={EXAMPLE_CODE} lang="rs" />
        </div>
        <div class="flex justify-center flex-col items-center">
            <video muted autoplay playsinline loop >
                <source src="/demo.mp4" type="video/mp4" >
            </video>
            <a class="w-36 bg-custom-purple p-2 text-center rounded-lg text-white hover:bg-custom-purple-dark transition-colors delay-[10]" href="https://github.com/marc2332/freya#want-to-try-it-">Run locally</a>
        </div>
    </div>
</Layout>

<style>
    video::-internal-media-controls-overlay-cast-button {
        display: none;
    }
</style>
